<template>
  <div class="file-type-icon flex items-center">
    <FileIconExcel v-if="isExcel" />
    <FileIconImage v-else-if="isImage" />
    <FileIconMarkdown v-else-if="isMarkdown" />
    <FileIconPdf v-else-if="isPdf" />
    <FileIconPpt v-else-if="isPpt" />
    <FileIconTxt v-else-if="isTxt" />
    <FileIconWord v-else-if="isWord" />
    <FileIconZip v-else-if="isZip" />
    <FileIconUnknown v-else />
  </div>
</template>

<script>
import FileIconExcel from '../svg-icons/file-excel.vue';
import FileIconImage from '../svg-icons/file-image.vue';
import FileIconMarkdown from '../svg-icons/file-markdown.vue';
import FileIconPdf from '../svg-icons/file-pdf.vue';
import FileIconPpt from '../svg-icons/file-ppt.vue';
import FileIconTxt from '../svg-icons/file-txt.vue';
import FileIconUnknown from '../svg-icons/file-unknown.vue';
import FileIconWord from '../svg-icons/file-word.vue';
import FileIconZip from '../svg-icons/file-zip.vue';

export default {
  name: 'FileTypeIcon',
  props: {
    fileName: {
      type: String,
      default: '',
    },
    // fileType: {
    //   type: String,
    //   default: 'unknown',
    // },
  },
  components: {
    FileIconExcel,
    FileIconImage,
    FileIconMarkdown,
    FileIconPdf,
    FileIconPpt,
    FileIconTxt,
    FileIconUnknown,
    FileIconWord,
    FileIconZip,
  },
  computed: {
    fileNameLowerCase() {
      return this.fileName && this.fileName.toLowerCase() || '';
    },
    isExcel() {
      return this.fileNameLowerCase.endsWith('.xls') ||
        this.fileNameLowerCase.endsWith('.xlsx');
    },
    isImage() {
      return this.fileNameLowerCase.endsWith('.jpg')
        || this.fileNameLowerCase.endsWith('.jpeg')
        || this.fileNameLowerCase.endsWith('.png')
        || this.fileNameLowerCase.endsWith('.gif');
    },
    isMarkdown() {
      return this.fileNameLowerCase.endsWith('.md');
    },
    isPdf() {
      return this.fileNameLowerCase.endsWith('.pdf');
    },
    isPpt() {
      return this.fileNameLowerCase.endsWith('.ppt')
        || this.fileNameLowerCase.endsWith('.pptx');;
    },
    isTxt() {
      return this.fileNameLowerCase.endsWith('.txt');
    },
    isWord() {
      return this.fileNameLowerCase.endsWith('.doc')
        || this.fileNameLowerCase.endsWith('.docx');
    },
    isZip() {
      return this.fileNameLowerCase.endsWith('.zip')
        || this.fileNameLowerCase.endsWith('.7z')
        || this.fileNameLowerCase.endsWith('.rar');
    },
  },
}
</script>

<style scoped lang="scss">
.file-type-icon {
  .comment-svg-icons {
    width: 24px;
    height: 24px;
  }
}
</style>
